Choosing web fonts: A beginner's guide 選擇網頁字型:新手入門指南
選擇網頁字型很簡單:要選好看的,更要選實用的。
選字型要記住三個簡單的要點:
- 看它適不適合做標題和正文
- 確認它有你需要的文字和符號
- 檢查它有沒有粗體和斜體
建議你先想好網頁的用途,再根據下面的建議來挑選字型。
Start with your project's scope 瞭解專案規模
你的專案是長期的還是短期的?比如說,你是要做一個雜誌網站(長期),還是做一個簡單的海報(短期)
對於長期專案來說,建議選擇大型字型家族。因為長期專案需要用到各種不同的字型樣式,比如粗體、斜體等。這樣你就不用到處找字型,用一個字型家族就能搞定。推薦這些字型:Alegreya、Merriweather、Roboto。
如果是短期專案,用單一字重的字型就夠了。不過,大型字型家族的多樣性在調整文字效果時也很有用。推薦這些字型:Bubblegum Sans、Space Mono。
What do you want your font to say? 字型傳達什麼感覺?
選字型沒有固定的規則,主要看字型的個性是否符合你的需求。
現在不用侷限於系統自帶的字型了。網頁字型和系統字型一樣穩定,而且選擇更多。
如果你想要與眾不同的字型,可以買商業字型,也可以定製字型(不過這樣比較貴)。免費的選擇是用Google Fonts上較新的字型,因為用的人還不多。
How much text are you typesetting? 文字有多長?
好的排版設計能讓讀者輕鬆找到閱讀路徑。根據文字長短選擇合適的字型很重要。
標題可以用獨特、有裝飾性的字型。短文字用粗體或壓縮字型效果更好。
中等長度的文字(3-4段)比較靈活,可以用襯線體(如Libre Baskerville)或無襯線體(如Montserrat)。
長文字(5段以上)建議用襯線體,因為這種字型看起來更舒服,特別是新聞文章這樣的長篇閱讀。推薦使用EB Garamond或Libre Baskerville。
What matters when it comes to point size? 字號大小有哪些考慮?
選擇網頁字型時要注意兩個關鍵點:文字有多長和字型有多大。
對於小字號(16pt以下),建議使用無襯線字型如Roboto、Montserrat和Raleway。這類字型有較高的x字高和均勻的筆畫,更易閱讀。
對於段落文字,字型設計師Octavio Pardo建議避免使用形狀模糊的裝飾性字型(如Comfortaa),而選擇像Alegreya和Bellefair.這樣的高可讀性字型。
透過觀察'a'、'g'和數字的形狀可以判斷字型質量。這些字形應該既大膽又清晰,而'v'、'w'、'x'、'y'和'z'等低頻字母可以更有設計感。
中等大小文字(16-24pt)適合使用幾何型或人文主義風格的無襯線字型,如Montserrat,Lato, andQuattrocento Sans。也可選擇現代平板襯線字型如Arvo,Sanchez, andSlabo.
大字號(24pt以上)的展示字型可以更具裝飾性,如LobsterorBerkshire Swash.但要避免使用內部空間過大的字型,這種特徵在放大後會顯得不協調。
Who's your audience and what languages do they speak? 你的使用者和他們使用的語言
現在的網站和應用都是面向全球使用者的。即使你只提供一種語言的內容,使用者也可能會用瀏覽器的翻譯功能來閱讀。
好的字型系列應該能適應不同的書寫系統。比如Alegreya、Merriweather、Nunito,Roboto, andQuattrocento等字型,都支援英文、歐洲語言和西裡爾字母。
其他網頁字型支援更廣泛的書寫系統。根據專案需求,字型是否支援匹配的阿拉伯文、希臘文或希伯來文字元可能成為優先考慮的因素。你還可以找到支援多種南亞文字的網頁字型,如孟加拉文、天城文、古吉拉特文和泰米爾文,以及東南亞語言如泰文。
How do you weigh a font’s functionality versus its design features? 你如何權衡字型的功能性與其設計特點?
字型家族的風格主要分為兩部分:功能性和設計特點。
功能性指的是字型有多少種樣式變化,比如斜體和粗細程度。好的字型應該有斜體,還要有從細到粗的多種粗細選擇。推薦嘗試這些字型:Barlow、Poppins、Libre Franklin。
設計特點則是指字型在某些字元上的特殊變化,比如小型大寫字母和數字樣式。小型大寫字母適合用在標題上,能讓文字層次更分明。推薦嘗試:Carrois Gothic SC、Cormorant SC、Patrick Hand SC.
字型的"替代字元"功能可讓設計更美觀。例如,Montserrat Alternates提供特別字母樣式,手寫字型(如Caveat、Sriracha)的替代字元能增加自然感。不論什麼字型,替代字元都能增添獨特性。
數字樣式主要有兩種:一種適合段落閱讀的傳統樣式,一種適合表格排版的等寬樣式。如果你的網頁需要展示很多數字,建議選擇這些支援多種數字樣式的字型Alegreya,Exo,Montserrat,Roboto,Spectral,Google Fonts with OpenType features.
What if you want to use more than one font? 想用多種字型怎麼辦?
在選擇多個字型的時候,字型搭配是最重要的。多試幾種不同的組合,你會找到好看的搭配。
字型搭配有兩種基本方法:
- 選擇風格不同的字型:這樣能讓網頁更生動有趣
- 選擇風格相似的字型:這樣能讓網頁看起來更整齊統一
記住一個簡單的原則:如果標題用了花哨的字型,正文就要用簡單的字型。最簡單的組合方式是標題用無襯線字型,正文用襯線字型。
這裡有兩個推薦的字型組合供你參考:
•AlegreyaandAlegreya Sans:它們是同一家族的字型,風格相似
•Libre Franklin和Libre Baskerville:它們的風格不同,形成對比
實用小提示:你可以直接去Google Fonts網站上試用這些字型組合,看看效果怎麼樣。